<!-- 检测者列表 -->
<div class="layuimini-container">

	<!-- 条件搜索  start-->
	<div class="layuimini-main" style="padding:4px;">
		<form class="layui-form layui-form-pane" action="">
			<!-- 分店查询 -->
			<div class="layui-inline" id="area-picker">
				<div class="layui-input-inline">
					<input type="text" id="a" name="storeName" placeholder="请输入分店名称" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<input type="text" id="b" name="storeCode" placeholder="请输入分店编码" autocomplete="off" class="layui-input">
				</div>


				<div class="layui-input-inline" style="width: 200px;">
					<select id="c" name="province" class="province-selector" lay-filter="province-1">
						<option value="">请选择省</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select id="d" name="city" class="city-selector" lay-filter="city-1">
						<option value="">请选择市</option>
					</select>
				</div>
				<div class="layui-input-inline" style="width: 200px;">
					<select id="e" name="county" class="county-selector" lay-filter="county-1">
						<option value="">请选择区/县</option>
					</select>
				</div>

				<!-- 搜索按钮 -->
				<div class="layui-inline" style="margin-left:15px;">
					<button type="submit" id="search" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-search-btn"><i
						 class="layui-icon"></i> 查询 </button>
					<button type="submit" id="reset" class="layui-btn layui-btn-normal" lay-submit lay-filter="data-reset-btn"><i
						 class="layui-icon"></i>重置</button>
					<a id="mainStore" class="layui-btn layui-btn-normal" href="#/page/store_list.html">返回总店列表</a>
				</div>
			</div>
		</form>
	</div>

	<!-- 数据表格 -->
	<div class="layuimini-main" style="padding:0 4px;">
		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
	</div>

	<!-- 定义 id="toolbarDemo"  -->
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" lay-event="add-patient"><i class="fa fa-pencil"></i> 添加分店 </button>
		</div>
	</script>


	<!-- 定义 id="currentTableBar" -->
	<script type="text/html" id="currentTableBar">
		<!-- <a href="#/page/table/sub_store_detall_list.html" class="layui-btn layui-btn-xs" lay-event="detail"> 查看详细 </a> -->
		<button type="button" class="layui-btn layui-btn-xs" lay-event="detail">查看详细</button>
	</script>
</div>


<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
	var sda = localStorage.getItem("roleName");
	console.log(sda);
	if (sda != "admin") {
		document.getElementById("mainStore").style.display = 'none';
	}
	//引用
	layui.use(['form', 'table', 'miniPage', 'element', 'layer', 'layarea', 'laydate'], function() {
		//初始化声明
		var $ = layui.jquery,
			form = layui.form, //将layui中的form组件对象定义成form
			table = layui.table,
			miniPage = layui.miniPage,
			layer = layui.layer,
			layarea = layui.layarea,
			laydate = layui.laydate;

		//渲染form表单
		form.render();

		//省市区
		layarea.render({
			elem: '#area-picker',
			//三级选择框每次选择时执行
			change: function(res) {
				//选择结果
			}
		});

		//对table进行初始化
		table.render({
			elem: '#currentTableId', //指定初始化的tableID
			url: 'http://localhost:8001/sccDrugstore/sub', //请求地址,获取数据，后期将调用controller的接口，获得json数据
			toolbar: '#toolbarDemo', //引用上面定义的工具栏按钮
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [
				[ //字段，表头
					{
						field: 'storeId',
						type: "checkbox",
						width: 50
					},
					{
						type: 'numbers',
						title: '序号',
						align: "center",
						width: 50
					},
					{
						field: 'storeName',
						title: '分店名称',
						width: 200
					},
					{
						field: 'storeCode',
						title: '分店编号',
						align: "center",
						width: 200
					},
					{
						field: 'province',
						title: '所在省',
						align: "center",
						width: 150
					},
					{
						field: 'city',
						title: '所在市',
						align: "center",
						width: 150
					},
					{
						field: 'county',
						title: '所在区/县',
						align: "center",
						width: 150
					},
					{
						field: 'addressDetall',
						title: '详细地址'
					},
					{
						title: '操作',
						width: 150,
						toolbar: '#currentTableBar',
						align: "center"
					}
				]
			],
			page: true, //是否显示分页插件
			limits: [10, 20, 30], //定义每页显示多少条记录
			limit: 10, //默认每页 显示15条
			skin: 'line'
		});
		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) { //当点击搜索按钮时，执行function()函数，data是指form表单中的所有数据
			data.field.parentCode = localStorage.getItem('parentCode');
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串）
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			//执行搜索重载
			table.reload('currentTableId', {
				page: {
					curr: 1
				}, //当前行是第一行
				where: {
					searchParams: result
				} //搜索条件
			}, 'data');

			return false;
		});
		// 监听重置操作
		form.on('submit(data-reset-btn)', function(data) {
			$("#a").val("");
			$("#b").val("");
			$("#c").val('');
			$("#d").val('');
			$("#e").val('');
			layui.use('form', function() {
				var form = layui.form;
				form.render("select");
			});
			var test = data.field;
			delete test.storeName;
			delete test.storeCode;
			delete test.province;
			delete test.city;
			delete test.county;
			test.parentCode = localStorage.getItem("parentCode");
			var result = JSON.stringify(data.field); //将搜索的数据转换成JSON字符串
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串）
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			// 执行搜索重载
			table.reload('currentTableId', {
				page: {
					curr: 1 //当前行是第一行
				},
				where: { //条件
					searchParams: result //搜索条件
				}
			}, 'data');

			return false;
		});

		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(currentTableFilter)', function(obj) {
			if (obj.event === 'add-patient') { // 监听添加操作
				var content = miniPage.getHrefContent('page/table/sub_store_add.html'); //加载页面
				var openWH = miniPage.getOpenWidthHeight();

				//定义弹出层
				var index = layer.open({
					title: '添加用户',
					type: 1,
					shade: 0.2,
					maxmin: true, //弹出层，最小化和最大化的按钮
					shadeClose: true, //关闭
					area: [openWH[0] - 50 + 'px', openWH[1] - 50 + 'px'],
					offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content, //弹出层的内容
				});

				$(window).on("resize", function() {
					layer.full(index); //对弹出层实现全屏效果
				});
				//TODO:当添加成功后，关闭弹出层，刷新table表格
			}
		});

		//监听表格复选框选择
		table.on('checkbox(currentTableFilter)', function(obj) {
		});







		//监 听操作列下面的查看详细
		table.on('tool(currentTableFilter)', function(obj) {
			//获得当前行数据
			var data = obj.data;
			// if (obj.event === 'detail') { //查看详细
			// 	localStorage.setItem('storeId',data.storeId);
			// 	return false;
			// }

			if (obj.event === 'detail') { //查看详细
				// localStorage.setItem('storeId',data.storeId);
				var content = miniPage.getHrefContent('page/table/sub_store_detall_list.html');
				var openWH = miniPage.getOpenWidthHeight();
				var index = layer.open({
					title: '查看详细',
					type: 1,
					shade: 0.2,
					maxmin: true, //弹出层，最小化和最大化的按钮
					shadeClose: true, //关闭
					area: [openWH[0] - 50 + 'px', openWH[1] - 50 + 'px'],
					offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content,
					success: function(layero, index) {
						$.ajax({
							url: 'http://localhost:8001/sccDrugstore/' + data.storeId,
							type: 'get',
							success: function(result) {
								var data = result.data[0];
								$(layero).find("input[name='storeName']").val(data.storeName);
								$(layero).find("input[name='storeCode']").val(data.storeCode);
								$(layero).find("input[name='province']").val(data.province);
								$(layero).find("input[name='city']").val(data.city);
								$(layero).find("input[name='county']").val(data.county);
								$(layero).find("input[name='provinceCode']").val(data.provinceCode);
								$(layero).find("input[name='cityCode']").val(data.cityCode);
								$(layero).find("input[name='countyCode']").val(data.countyCode);
								$(layero).find("input[name='addressDetall']").val(data.addressDetall);
								$(layero).find("input[name='createTime']").val(data.createTime);
								$(layero).find("input[name='updateTime']").val(data.updateTime);
								// $(layero).find("input[name='name']").val(data.name);
								// $(layero).find("input[name='phone']").val(data.phone);
								$(layero).find("input[name='storeId']").val(data.storeId);
								form.render(); //更新全部
							}
						});
					}
				});
				return false;
			}

		});

		layer.ready(function() { //初始化加载
			var data = {};
			data.parentCode = localStorage.getItem('parentCode');
			var result = JSON.stringify(data); //将搜索的数据转换成JSON字符串
			// layer.alert(result, { //弹出层，显示result（转换后的json字符串）
			// 	title: '最终的搜索信息' //弹出层的标题
			// });
			//执行搜索重载
			table.reload('currentTableId', {
				page: {
					curr: 1
				}, //当前行是第一行
				where: {
					searchParams: result
				} //搜索条件
			}, 'data');
		});

	});
</script>
